<template>
  <div class="chit-list-root">
    <div class="goBack" v-if="addGoBack">
      <go-back :title="goBackTitle" @goBack="goBack"></go-back>
    </div>
    <div class="chit-txt" v-if="showChitInfo && chitData != null" @click="goChitInfo">
      <div class="chit-title">
          <div class="head-portrait">
            <div class="img-con">
              <img src="@/assets/images/chit/headPortrait.png"/>
            </div>
          </div>
          <div class="txt-con">
            <div class="label-value-con imp">
              <div class="label">保单标题：</div>
              <div class="value">{{ chitData.bdbt }}</div>
            </div>
            <div class="label-value-con">
              <div class="label">保险单号码：</div>
              <div class="value">{{ chitData.bxdhm }}</div>
            </div>
          </div>
      </div>
    </div>
    <div class="body-con" :style="{height: `calc(100% - ${(addGoBack ? 50 : 0 )+ (showChitInfo ? 85 : 0 )}px)`}">
      <el-scrollbar>
        <slot></slot>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import goBack from "@/views/chitLook/components/chitQuery/goBack.vue";

export default {
  name: "listCon",
  components: {
    goBack
  },
  props: {
    goBackTitle: {
      type: String
    },
    addGoBack: {
      type: Boolean,
      default: false
    },
    chitData: {
      type: Object
    },
    showChitInfo: {
      type: Boolean,
      default: false
    },
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    },
    goChitInfo(){
      this.$emit('goChitInfo', this.chitData)
    }
  }
}
</script>

<style lang="scss" scoped>
.chit-list-root {
  width: 100%;
  height: 700px;


  .goBack, .body-con,.chit-txt {
    width: 100%;
    box-sizing: border-box;
  }

  .chit-txt{
    height: 80px;
    margin-bottom: 5px;
    .chit-title{
      height: 100%;
    }
  }

  .goBack {
    height: 40px;
    margin-bottom: 5px;
  }

  .body-con {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>
